<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Online Store</title>
	<link rel="stylesheet" href="default.css"/>
</head>
<body>
<div id="main">
	<div id="search-box">
		<label>
			<input id="search_input" type="text" name='q'/>
		</label>
		<button id="search_button">Search</button>
		<button id="quit_search">Reset</button>
	</div>

	<div id="filters-bar">
		<ul>
			<li>
				<a href="#red">Red</a>
			</li>
			<li>
				<a href="#blue">Blue</a>
			</li>
			<li>
				<a href="#mobile">Mobile</a>
			</li>
			<li>
				<a href="#accessory">Accessory</a>
			</li>
		</ul>
	</div>

	<div id="product-panel">
		<ul>
			<li id="1" data-8088-keyword="red"><img src="img/1.jpg">

				<p>First Item</p></li>
			<li id="2" data-8088-keyword="blue"><img src="img/2.jpg">

				<p>Second Item</p></li>
			<li id="3" data-8088-keyword="mobile"><img src="img/3.jpg">

				<p>Third Item</p></li>
			<li id="4" data-8088-keyword="accessory"><img src="img/4.jpg">

				<p>Fourth Item</p></li>
			<li id="5" data-8088-keyword="red mobile"><img src="img/5.jpg">

				<p>Fifth Item</p></li>
			<li id="6" data-8088-keyword="blue mobile"><img src="img/6.jpg">

				<p>Sixth Item</p></li>
			<li id="7" data-8088-keyword="red accessory"><img src="img/7.jpg">

				<p>Seventh Item </p></li>
			<li id="8" data-8088-keyword="blue accessory"><img src="img/8.jpg">

				<p>Eighth Item</p></li>
			<li id="9" data-8088-keyword="red blue"><img src="img/9.jpg">

				<p>Ninth Item</p></li>
			<li id="10" data-8088-keyword="mobile accessory"><img src="img/10.jpg">

				<p>Tenth Item</p></li>
		</ul>

	</div>

	<div id="shopping-cart">
		<ul>

		</ul>
	</div>

	<script src="js/libs/jquery.js"></script>
	<script src="js/lambdacore/sandbox/lib-jquery.js"></script>
	<script src="js/lambdacore/sandbox/core.js"></script>
	<script src="js/lambdacore/sandbox/sandbox.js"></script>
	<script src="js/sandbox.js"></script>

</div>
</body>
</html>
